<template>
    <div id="foot">
      <div>
        <div class="top">
          <div >
            <img src="../assets/qianshan/weibo.png" alt="" />
          </div>
          <div>
            <a href=""><img src="../assets/qianshan/dingpiao.png" alt="" /></a>
            
          </div>
        </div>
        <div class="middle">
          <ul>
            <li>
              <div>
                <a href="">FAQ</a>
                <a href="">景区概况</a>
                <a href="">门票预定</a>
                <a href="">服务电话</a>
              </div>
            </li>
            <li>
              <div>
                <a href="">祈福之旅</a>
                <a href="#">自然之旅</a>
                <a href="">养生之旅</a>
                <a href="">探索之旅</a>
              </div>
            </li>
            <li>
              <div>
                <a href="">如何到达</a>
                <a href="">住在哪里</a>
                <a href="">游玩指南</a>
                <a href="#">深度体验</a>
              </div>
            </li>
            <li>
              <div>
                <a href="https://www.mct.gov.cn/">国家旅游局</a>
                <a href="http://www.lntour.gov.cn/">辽宁省旅游局</a>
                <a href="">营业执照</a>
              </div>
            </li>
          </ul>
        </div>
        <div class="bottom">
          <div>
            <p>
              <img src="../assets/qianshan/guiguan.png" alt="" />
            </p>
            <p>
              <a href="#"
                >京ICP备xxxxxx号/京公网安备xxx Copyright ? 2003-2021 MEISHIJ
                CO.,LTD</a
              >
            </p>
          </div>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {};
  </script>
  
  <style lang="scss" scoped>
  #foot {
    height: 400px;  
    background-color: #3c3c3c;
    width: 100%;
    > div {
      width: var(--container-width);
      margin: 0 auto;
      > .top {
        display: flex;
        align-items: center;
        padding: 10px 200px;
        border-bottom: 1px solid #999;
        > div:first-child {
          width: 100px;
          height: 100px;
          margin-right: 600px;
          background-color: #24384b;
          color: white;
          border-radius: 10px;
          text-align: center;
          > img {
            width: 100px;
            height: 100px;
            margin: 0 auto;
          }
        }
        > div:last-child {
          width: 100px;
          height: 100px;
          background-color: #24384b;
          border-radius: 10px;
          text-align: center;
          padding-top: 5px;
          > a img {
            width: 100px;
            height: 95px;
            margin: 0 auto;
          }
          > p {
            font-size: 12px;
            color: white;
          }
        }
      }
      > .middle {
        > ul {
          width: 100%;
          padding: 10px 0;
          display: flex;
          border-bottom: 1px solid #999;
          li {
            width: calc((100% - 3 * 20px) / 4);
            > div {
              display: flex;
              flex-direction: column;
              text-align: center;
              > a {
                color: white;
              }
            }
          }
        }
      }
      > .bottom {
        text-align: center;
        padding-top: 15px;
        > div {
          margin-bottom: 20px auto;
          > P {
            padding-top: 15px;
            > a {
              color: white;
            }
          }
        }
      }
    }
  }
  </style>